<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-6
  Time: 上午 08:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>小米商城后台管理</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!-- CSS -->
    <link href="${pageContext.request.contextPath}/other/style/background/activity.css" rel="stylesheet"
          type="text/css"/>

    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/message.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/background/activity.js"></script>
</head>
<body>
<div class="head">
    <div class="title">
        <span>发布活动</span>
    </div>

    <div class="search">
        <div class="search-input">
            <label>
                <input type="text" placeholder="请输入活动标题/活动ID">
            </label>
        </div>
        <div class="search-img">
            <img src="http://localhost:8083/resource_packs/images/search_%23fff.png" alt="搜索">
        </div>
    </div>

</div>
<div class="other-operate">
    <div class="sift">
        <label for="dateBegin">范围:</label>
        <input type="date" id="dateBegin"> -
        <label for="dateEnd">
            <input type="date" id="dateEnd">
        </label>

    </div>
    <div class="sift">
        <label for="type">类型:</label>
        <select name="languages" id="type">
            <option value="0">普通</option>
            <option value="1">物流通知</option>
            <option value="2">特惠活动</option>
        </select>
    </div>
    <div>
        <span class="date">时间:</span>
        <label for="date-flashback"></label>
        <jsp:useBean id="activityDate" scope="request" type="java.lang.String"/>
        <input type="radio" id="date-flashback" name="drone" value="0" ${activityDate == 0 ? 'checked' : ''}/>倒序
        <label for="date-positive-order"></label>
        <input type="radio" id="date-positive-order" name="drone" value="1" ${activityDate == 1 ? 'checked' : ''}/>正序
    </div>
    <div class="sift-button">
        <button class="select">查询</button>
        <button class="insert">新增</button>
    </div>
</div>
<table class="recycle-bin-table">
    <tr>
        <th>
            ID
        </th>
        <th>
            通知标题
        </th>
        <th>
            通知内容
        </th>
        <th>
            类型
        </th>
        <th>
            发布日期
        </th>
        <th>
            操作
        </th>
    </tr>
    <jsp:useBean id="messagePage" scope="request" type="com.xm.entity.Page"/>
    <c:forEach var="message" items="${messagePage.data}">
        <tr>
            <td class="recycle-bin-id">
                    ${message.messageId}
            </td>
            <td>
                    ${message.messageTitle}
            </td>
            <td>
                    ${message.messageContext}
            </td>
            <td>
                <c:if test="${message.messageType == 0}">
                    普通
                </c:if>
                <c:if test="${message.messageType == 1}">
                    物流通知
                </c:if>
                <c:if test="${message.messageType == 2}">
                    特惠活动
                </c:if>
            </td>
            <td>
                    ${message.massageDate}
            </td>
            <td class="operate">
                <button class="leave" message-id="${message.messageId}">删除</button>
            </td>
        </tr>
    </c:forEach>


</table>
<div class="pagination-function">
    <ul class="pagination">
        <c:if test="${messagePage.pageNumber ne 1}">
        <li><a href="?menuId=107&pageNumber=1&pageSize=${messagePage.pageSize}">首页</a>
        <li><a href="?menuId=107&pageNumber=${messagePage.pageNumber - 1}&pageSize=${messagePage.pageSize}">上一页</a>
            </c:if>

            <c:forEach var="page" begin="1" end="${messagePage.totalPages}">
            <c:choose>
            <c:when test="${page eq messagePage.pageNumber}">
        <li><a href="?menuId=107&pageNumber=${page}&pageSize=${messagePage.pageSize}" class="active">${page}</a>
            </c:when>
            <c:otherwise>
            <c:if test="${page eq 1 or page eq messagePage.totalPages or (page ge messagePage.pageNumber - 2 and page le messagePage.pageNumber + 2)}">
        <li><a href="?menuId=107&pageNumber=${page}&pageSize=${messagePage.pageSize}">${page}</a>
            </c:if>
            <c:if test="${page eq messagePage.pageNumber - 3}">
        <li><span>...</span>
            </c:if>
            <c:if test="${page eq messagePage.pageNumber + 3}">
        <li><span>...</span>
            </c:if>
            </c:otherwise>
            </c:choose>
            </c:forEach>

            <c:if test="${messagePage.pageNumber ne messagePage.totalPages}">
        <li><a href="?menuId=107&pageNumber=${messagePage.pageNumber + 1}&pageSize=${messagePage.pageSize}">下一页</a>
        <li><a href="?menuId=107&pageNumber=${messagePage.totalPages}&pageSize=${messagePage.pageSize}">尾页</a>
            </c:if>
    </ul>

</div>


<!-- 弹窗：新增 -->
<div class="add-window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>发布活动</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
        <div class="substance">
            <label>
                <p>
                    标题:
                    <input type="text" id="messageTitle" placeholder="请输入标题">
                </p>
                <p class="messageContext">
                    内容:
                    <textarea cols="50" rows="15" id="messageContext" placeholder="请输入内容"></textarea>
                </p>
                <p>
                    <label for="addType">类型:</label>
                    <select name="languages" id="addType">
                        <option value="0">普通</option>
                        <option value="1">物流通知</option>
                        <option value="2">特惠活动</option>
                    </select>
                </p>
            </label>
        </div>
        <div class="addButton">
            <button class="cancel">取消</button>
            <button class="publish">发布</button>
        </div>
    </div>
</div>

<!-- 弹窗：回收站 -->
<div class="recycle-bin-window" style="display: none">
    <div class="pop-up-shade-layer"></div>
    <div class="pop-ups">
        <div class="pop-ups-title">
            <span>回收站</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                 alt="弹窗关闭" class="pop-ups-down">
        </div>
    </div>
</div>
</body>
</html>
